<template>
  <div class="cesium-viewer-wapper">
    <div id="cesium-viewer"></div>
    <div class="tool-box-left-top">
      <p><button :class="{ active: !!synchronizer }" @click="handleClick('ViewRect')">ViewRect</button></p>
      <p><button :class="{ active: isRepeating }" @click="handleClick('CenterPos')">CenterPos</button></p>
      <p><button :class="{ active: videoOverlay }" @click="handleClick('videoOverlay')">播放器</button></p>
    </div>
    <viewerSettingSidebar :viewerSource="viewerSource" style="top:160px" />
    <MousePosition show :viewerSource="viewerSource" />
    <g3vPlayer showTime :clockOptions="clockOptions" :viewerSource="viewerSource" :sliderOption="sliderOption" v-model:playing="playing" />
  </div>
  <div class="cesium-overview-wapper"><div id="cesium-overview"></div></div>
</template>

<script>
import * as Cesium from '@cesiumjs';
import { defineComponent, ref, watch } from 'vue';
import { SelectBox, SliderBar } from '@components/widgets';
import { G3V } from '@g3x/g3v';
import { RainEffect, SnowEffect, FogEffect } from '@g3x/g3v/effects';
import { MousePosition, viewerSettingSidebar, g3vPlayer } from '@g3x/g3v/ui';
import { defaultViews } from '@g3x/g3v/defaultOptions';

const g3vOptions = {
  defaultViewRectangle: G3V.defaultViews.global.china.rectangle,
  viewers: [{
      dom: 'cesium-viewer',
      name: 'viewer1',
      title: 'viewer#01',
      bottomContainer: false,
      overview: true,
      viewer: {
        imagery: { type: 'arcgisImagery', options: { brightness: 1, show: true } },
        imageryProvider: null,
        terrain: { type: 'default', options: { requestVertexNormals: true, requestWaterMask: true } },
        terrainProvider: null,
        shadows: false
      },
      layers: [
        { type: 'tdtIboMap', options: { brightness: 1, show: true } },
        { type: 'tdtImgAnno', options: { brightness: 1, show: true } },
        // { type: 'darkMask', options: { brightness: 1, alpha: 0.9 } },
        { type: 'graticule', options: { brightness: 1, show: true, label: true } }
      ],
      globe: {
        depthTestAgainstTerrain: false,
        enableLighting: true //启用以太阳为光源的地球
      },
      navigation: {
        // defaultResetView: G3V.defaultViews.global.china.rectangle ,
        defaultResetView: null //flyHome
      },
      hideLayers: false
    }
  ],
  overview:{
    dom: 'cesium-overview',
    name: 'overview',
    title: 'overview',
    bottomContainer: false,
    viewer: {
      imagery: { type: 'arcgisImagery', options: { brightness: 1, show: true } },
      imageryProvider: null,
      // terrain: { type: 'default', options: { requestVertexNormals: true, requestWaterMask: true } },
      // terrainProvider: null,
      shadows: false,
    },
    layers: [
      { type: 'tdtIboMap', options: { brightness: 1, show: true } },
      { type: 'tdtImgAnno', options: { brightness: 1, show: true } },
      // { type: 'darkMask', options: { brightness: 1, alpha: 0.9 } },
      { type: 'graticule', options: { brightness: 1, show: true, label: false } }
    ],
    globe: {
      enableLighting: true //启用以太阳为光源的地球
    },
  }
};

export default defineComponent({
  name: 'my-video', // 视频
  components: { SelectBox, SliderBar, viewerSettingSidebar, g3vPlayer, MousePosition },
  setup() {
    return { eventHandler: null };
  },
  props: {},
  data() {
    return {
      playing: true,
      g3v: null,
      sliderOption: { max: 3600 * 2, step: 1 },
      synchronizer: null,
      isRepeating: false,
      videoOverlay: false
    };
  },
  computed: {
    viewer() {
      return this.g3v && this.g3v.viewer$1;
    },
    g3vViewer() {
      return this.g3v && this.g3v.g3vViewer$1;
    },
    viewerSource() {
      const { viewer } = this;
      return { viewer };
    },
    clockOptions() {
      return { multiplier: 1 };
    }
  },
  watch: {},
  mounted() {
    this.initViewer();
  },
  beforeUnmount() {
    const { eventHandler } = this;
    this.eventHandler = eventHandler && eventHandler.destroy();
  },
  unmounted() {
    this.g3v && this.g3v.destroy();
    this.g3v = null;
  },
  methods: {
    initViewer() {
      let vm = this;
      vm.g3v = new G3V(g3vOptions,()=>{
        vm.onViewerInited();
        vm.initEffects();
      });
    },
    onViewerInited() {},
    initEffects() {},
    handleClick(value) {
      const { g3vViewer } = this;
      if (value === 'ViewRect') {
        this.showViewRectangle(g3vViewer);
      }
      if (value === 'CenterPos') {
        this.showCenterPosition(g3vViewer);
      }
    },
    showViewRectangle(g3vViewer) {
      const { viewer, camera, globe, entities } = g3vViewer;
      let rect = camera.computeViewRectangle();
      const rectangle = {
        coordinates: Cesium.Rectangle.fromRadians(rect.west, rect.south, rect.east, rect.north, new Cesium.Rectangle()),
        height: 0,
        material: Cesium.Color.RED.withAlpha(0.5)
      };
      if (g3vViewer._viewRectangle) {
        entities.remove(g3vViewer._viewRectangle);
      }
      g3vViewer._viewRectangle = entities.add({ rectangle });
    },
    showCenterPosition(g3vViewer) {
      const { viewer, camera, scene, entities } = g3vViewer;
      const {
        canvas: { clientWidth, clientHeight }
      } = scene;
      var position = camera.pickEllipsoid(new Cesium.Cartesian2(clientWidth / 2, clientHeight / 2));

      viewer.entities.add({
        position,
        billboard: {
          // 图像地址，URI或Canvas的属性
          image: '//zzgis.com/cdn/3d/g3x/icons/cross-red.png',
          // 设置颜色和透明度
          // color: Cesium.Color.WHITE.withAlpha(0.8),
          // 高度（以像素为单位）
          height: 128,
          // 宽度（以像素为单位）
          width: 128,
          // 逆时针旋转
          rotation: 0,
          // 大小是否以米为单位
          sizeInMeters: false,
          // 相对于坐标的垂直位置
          verticalOrigin: Cesium.VerticalOrigin.CENTER,
          // 相对于坐标的水平位置
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
          // pixelOffset: new Cesium.Cartesian2(0, 0),
          // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
          scale: 0.25,
          // 是否显示
          show: true
        }
      });
    }
  }
});
</script>

<style lang="less">
.tool-box-left-top {
  display: flex;

  button {
    min-width: 5em;
    background-color: rgba(0, 0, 0, 0.75);
    border-color: rgba(0, 0, 0, 0);
    cursor: pointer;

    transition: all 500ms;

    &:hover {
      opacity: 0.75;
    }

    &.active {
      background-color: rgba(0, 20, 200, 0.75);
    }
  }
}

.cesium-overview-wapper {
  position: fixed;
  bottom: -1px;
  left: -1px;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background-color: rgba(0, 0, 0, 1);

  #cesium-overview {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}
</style>
